<template>
    <div class="visiting-card">
        <h2>个人名片</h2>
        <div>
            <span>昵称 : </span>
            <span>Kevin / 龙哥</span>
        </div>
        <div>
            <span>职业 : </span>
            <span>J2EE工程师</span>
        </div>
        <div>
            <span>现居 : </span>
            <span>上海-普陀</span>
        </div>
        <div>
            <span>Email : </span>
            <span>15216876513@163.com</span>
        </div>
        <div class="icon-target">
            <a href="#"><i class="fa fa-qq fa-3x"></i></a>
            <a href="#"><i class="fa fa-weixin fa-3x"></i></a>
            <a href="#"><i class="fa fa-github fa-3x"></i></a>
            <a href="#"><i class="fa fa-envelope-o fa-3x"></i></a>

        </div>
    </div>
</template>

<script>
    export default {
        name: "VisitingCard"
    }
</script>

<style scoped>
    .icon-target{
        text-align: center;
    }
    .icon-target a{
        color: #ffffff;
    }
    .icon-target i{
        display: inline-block;
        overflow: hidden;
        box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7)!important;
        border-radius: 50%;
        margin: 0 12px;
        padding: 7px;
    }
    i:hover{
        color:yellow
    }

    .visiting-card{
        background-color: rgba(0, 0, 5, 0.73);
        color: #8b98ab;
        height: 260px;
        padding: 10px 10px 30px 20px;
        font-size: 12px;
        border: 1px solid #000;
        margin-bottom: 20px;
    }
    .visiting-card div{
        padding: 8px;
    }
    .visiting-card h3{
        color: #8f8f8f;
    }
</style>